import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.pink),
        home: Scaffold(
          appBar: AppBar(title: Text('图片组件')),
          body: HomePage(),
        ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    /*return Center(
        child: Container(
      width: 300,
      height: 500,
      decoration: BoxDecoration(color: Colors.green),
      child: Image.network(
        'http://b.hiphotos.baidu.com/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
        alignment: Alignment.bottomRight,
        color: Colors.blue,
        colorBlendMode: BlendMode.screen, // 图片混合颜色（滤镜）
//        fit: BoxFit.cover, // 常用属性
        repeat: ImageRepeat.repeatY,
      ),
    ));*/

    // 圆形图片-方法1
    /*return Center(
      child: Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(150),
            image: DecorationImage(
                image: NetworkImage('http://b.hiphotos.baidu.com/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg'),
                fit: BoxFit.cover
            )
        ),
      ),
    );*/

    // 圆形图片-方法2(推荐)
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.asset('images/img1.jpg',
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
          /*child: Image.network('http://b.hiphotos.baidu.com/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),*/
        ),
      ),
    );
  }
}
